<template>
	<view class="mesInfo">
		<view class="MessageList" v-if="msgList.length > 0">
			<view class="listItem dis" v-for="item in msgList" :key="item.id" @click="messageClick(item)">
				<view class="itemL dis">
					<view class="itemLL">
						<image v-if="item.type == 'system'" src="/post/static/default_avatar.jpg" mode=""></image>
						<image v-else :src="item.senderAvatar" mode=""></image>
					</view>
					<view class="itemLR dis" v-if="item.type == 'system'">
						<view class="itemLRTSys dis">
							<view class="itemName">系统通知</view>
							<view class="itemType">{{ item.createTime }}</view>
						</view>
						<view class="itemLRB">{{ item.content }}</view>
					</view>
					<view class="itemLR dis" v-else>
						<view class="itemLRT dis">
							<view class="itemName">{{ item.senderNickname }}</view>
							<view class="itemType">{{ item.title }}</view>
						</view>
						<view class="itemLRB">{{ item.createTime }}</view>
					</view>
				</view>
				<view class="itemR ellipsis3" v-if="item.type != 'system'">{{ item.content }}</view>
			</view>
			<view class="noData">没有更多内容了,亲~</view>
		</view>
		<view class="noData" v-else>暂无数据</view>
	</view>
</template>

<script setup>
import { timeago } from '@/util/util.js';
import { getMesReply, getMesSys, getMesLike, getMesWatch } from '@/config/api.js';
import { ref } from 'vue';
import { onShow, onLoad, onReachBottom } from '@dcloudio/uni-app';
onLoad((options) => {
	// 1回复我的 2插眼消息 3收到的赞 4系统通知
	msgType.value = options.num;
	getList();
});
const msgType = ref('1');
const pageNum = ref(1);
const pageSize = ref(10);
const total = ref(10);
const msgList = ref([]);
const getList = async () => {
	const data = {
		pageNum: pageNum.value,
		pageSize: pageSize.value
	};
	let dataList = [];
	// 1回复我的 2插眼消息 3收到的赞 4系统通知
	if (msgType.value == 1) {
		dataList = await getMesReplyFun(data);
		msgList.value = dataList.list;
		total.value = dataList.total;
	} else if (msgType.value == 2) {
		dataList = await getMesWatchFun(data);
		msgList.value = dataList.list;
		total.value = dataList.total;
	} else if (msgType.value == 3) {
		dataList = await getMesLikeFun(data);
		msgList.value = dataList.list;
		total.value = dataList.total;
	} else if (msgType.value == 4) {
		dataList = await getMesSysFun(data);
		msgList.value = dataList.list;
		total.value = dataList.total;
	}
};
const getMesReplyFun = async (data) => {
	const res = await getMesReply(data);
	if (res.code == 0) {
		res.data.pageInfo.list.map((item) => {
			item.createTime = timeago(item.createTime);
			return item;
		});
		return {
			list: [...msgList.value, ...res.data.pageInfo.list],
			total: res.data.pageInfo.total
		};
	}
};
const getMesSysFun = async (data) => {
	const res = await getMesSys(data);
	if (res.code == 0) {
		res.data.pageInfo.list.map((item) => {
			item.createTime = timeago(item.createTime);
			return item;
		});
		return {
			list: [...msgList.value, ...res.data.pageInfo.list],
			total: res.data.pageInfo.total
		};
	}
};
const getMesLikeFun = async (data) => {
	const res = await getMesLike(data);
	if (res.code == 0) {
		res.data.pageInfo.list.map((item) => {
			item.createTime = timeago(item.createTime);
			return item;
		});
		return {
			list: [...msgList.value, ...res.data.pageInfo.list],
			total: res.data.pageInfo.total
		};
	}
};
const getMesWatchFun = async (data) => {
	const res = await getMesWatch(data);
	if (res.code == 0) {
		res.data.pageInfo.list.map((item) => {
			item.createTime = timeago(item.createTime);
			return item;
		});
		return {
			list: [...msgList.value, ...res.data.pageInfo.list],
			total: res.data.pageInfo.total
		};
	}
};
const messageClick = (item) => {
	// console.log(item.link)
	const match = item.link.match(/threadId=([^&]+)/);
	if (match && match[1]) {
		const threadId = match[1];
		uni.navigateTo({
			url: `/post/post/postDetails?id=${threadId}&remarkId=${item.postId}`
		});
	} else {
		console.log('threadId not found in the URL');
	}
};
onReachBottom(() => {
	if (msgList.value.length >= total.value) {
		console.log('没有更多内容了');
	} else {
		pageNum.value++;
		getList();
	}
});
</script>

<style lang="scss" scoped>
.mesInfo {
	.MessageList {
		.listItem {
			padding: 35rpx 0;
			padding-left: 30rpx;
			padding-right: 30rpx;
			border-bottom: 2rpx solid #e8e8e8;
			.itemL {
				flex: 1;
				height: 90rpx;
				.itemLL {
					margin-top: 10rpx;
					margin-right: 20rpx;
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					background-color: #564ae9;
					overflow: hidden;
				}
				.itemLR {
					flex: 1;
					flex-direction: column;
					justify-content: space-between;
					font-size: 24rpx;
					color: #666;
					.itemLRT {
						.itemName {
							font-weight: 700;
							color: #000;
							font-size: 28rpx;
						}
						.itemType {
							margin-left: 10rpx;
						}
					}
					.itemLRTSys {
						justify-content: space-between;
						align-items: center;
						width: 100%;
						.itemName {
							font-weight: 700;
							color: #000;
							font-size: 28rpx;
						}
						.itemType {
							margin-left: 10rpx;
						}
					}
				}
			}
			.itemR {
				width: 144rpx;
				height: 100%;
				color: #666;
				font-size: 24rpx;
			}
		}
	}
	.noData {
		width: 100%;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #999;
	}
}
</style>
<style>
image {
	width: 100%;
	height: 100%;
}
</style>
